<template>
  <div class="week-card-count">
    <head-top head-title="本周打卡统计" go-back="true"></head-top>
    <!-- <div class="desc">本周打卡统计</div>                        -->
    <lay-overtime :earlyNum="earlyNum" :signNum="signNum" :lateNum="lateNum" :lackNum="lackNum" v-if="flag"></lay-overtime>
    <week-count :weekDatas="weekData" :id="$route.params.id" v-if="flag"></week-count>
  </div>
</template>

<script>
import headTop from '../../components/header/Header.vue'
import weekCount from '../common/weekCount.vue'
import layOvertime from '../common/layOvertime.vue'
import {getDakaData} from '../../api/jianli.js'

export default {
  name: 'WeekCardDetail',
  data() {
    return {
      // signNum:出勤天数
      // lateNum:迟到次数
      // lackNum:缺卡次数
      weekData: [],
      lackNum: '',
      lateNum: '',
      signNum: '',
      earlyNum: '',
      flag: false
    }
  },
  components: {
    headTop,
    weekCount,
    layOvertime
  },
  created() {
    this._getWeekDakaData()
  },
  methods: {
    _getWeekDakaData() {
      getDakaData('week', this.$route.params.id).then(res => {
        this.weekData = res.data.data[0]
        this.lackNum = res.data.lackNum
        this.lateNum = res.data.lateNum
        this.signNum = res.data.signNum
        this.earlyNum = res.data.earlyNum
        this.flag = true
      })
    }
  }
}
</script>

<style lang="scss">
  .week-card-count{
    padding-top: 40px;
    .desc{
      padding: 0 10px;
      height: 30px;
      line-height: 30px;
    }
    .mint-cell-wrapper{
      background-size: 100% 1px;
    }
  }
</style>
